<template>
  <div>
    <el-card>
      <el-form ref="form"
               :model="sizeForm"
               :inline="true"
               label-width="100px"
               size="mini">
        <el-form-item label="用户名称/ID">
          <el-input v-model.trim="sizeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="推广收益筛选">
          <el-col :span="11">
            <el-date-picker type="date"
                            placeholder="选择时间"
                            v-model="sizeForm.dateFirst"
                            style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line"
                  :span="1">-</el-col>
          <el-col :span="11">
            <el-date-picker placeholder="选择时间"
                            v-model="sizeForm.dateEnd"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary"
                     @click="queryUserId">查询</el-button>
          <el-button @click="replacementUserId">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="market">
      <span>推广人数量：{{allPeopel}}</span>
      <el-divider direction="vertical"></el-divider>
      <span>推广店铺总数：{{allPromoteStore}}</span>
    </div>
    <el-card>
      <el-table :data="tableData"
                border
                stripe
                style="width: 100%">
        <el-table-column prop="product_id"
                         label="用户ID">
        </el-table-column>
        <el-table-column prop="seller"
                         label="用户昵称">
        </el-table-column>
        <el-table-column prop="iphone"
                         label="联系电话">
        </el-table-column>
        <el-table-column prop="peopel_id"
                         label="推广数量">
        </el-table-column>
        <el-table-column prop="prices"
                         label="推广收益">
        </el-table-column>
        <el-table-column prop="address"
                         label="操作">
          <el-link type="primary"
                   @click="goDetails">推广详情</el-link>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {

  },
  components: {

  },
  data () {
    return {
      sizeForm: {
        name: '',
        dateFirst: '',
        dateEnd: ''
      },
      tableData: [],
      tableDataTwo: [],
      ShopInfo: {
        number: '',
        industry: ''
      },
      allPeopel: 0,
      allPromoteStore: 0
    }
  },
  created () {
    this.getShopList()
  },
  methods: {
    async getShopList () {
      this.allPeopel = 0
      this.allPromoteStore = 0
      const { data } = await this.$http.get('/product')
      this.tableData = data.list
      this.tableDataTwo = data.list
      data.list.forEach((item, index) => {
        item.prices = item.price + '元'
        this.allPeopel += item.peopel_number
        this.allPromoteStore += item.promote_store
      })
    },
    // 点击跳转推广详情
    goDetails () {
      this.$router.push('/details')
    },
    // 重置
    replacementUserId () {
      this.getShopList()
      this.sizeForm.name = ''
      this.sizeForm.dateFirst = ''
      this.sizeForm.dateEnd = ''
    },
    queryUserId () {
      this.tableData = this.tableDataTwo
      if (this.sizeForm.name.length < 1) {
        this.$message.error('请填写搜索内容')
      }
      if (this.sizeForm.name) {
        const arr = []
        this.List = this.list
        this.tableData.forEach((item, index) => {
          if (item.product_id === this.sizeForm.name * 1 || item.seller === this.sizeForm.name) {
            arr.push(item)
          }
        })
        this.tableData = arr
      }
    }
  }
}
</script>

<style lang="less" scoped>
.market {
  margin: 15px 0 0 15px;
}
/deep/.el-table th > .cell {
  text-align: center;
}

/deep/.el-table .cell {
  text-align: center;
}
</style>
